{% extends "docker_engine/base.html" %}


{% load staticfiles %}


{% block extra-css %}
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/css/custom.css' %}" />
{% endblock %}


{% block content %}
<div id="page" class="dashboard">
    <!-- BEGIN OVERVIEW STATISTIC BLOCKS-->
    <div class="row-fluid">
        <div class="span3 responsive" data-tablet="span6" data-desktop="span3">
            <div class="circle-stat block">
                <div class="visual">
                    <input class="knobify" data-width="115" data-thickness=".2" data-skin="tron" data-displayprevious="true" value="+8" data-max="10" data-min="0" />
                </div>
                <div class="details">
                    <div class="title">Nodes <i class="icon-caret-up"></i></div>
                    <div class="number">8</div>
                    <span class="label label-success"><i class="icon-map-marker"></i> 2</span>
                    <span class="label label-warning"><i class="icon-comment"></i> 3</span>
                </div>
            </div>
        </div>
        <div class="span3 responsive" data-tablet="span6" data-desktop="span3">
            <div class="circle-stat block">
                <div class="visual">
                    <input class="knobify" data-width="115" data-fgcolor="#66EE66" data-thickness=".2" data-skin="tron" data-displayprevious="true" value="+3" data-max="3" data-min="0" />
                </div>
                <div class="details">
                    <div class="title">Runing Tasks <i class="icon-caret-up"></i></div>
                    <div class="number">3</div>
                    <span class="label label-success"><i class="icon-ok"></i> 3</span>
                    <span class="label label-warning"><i class="icon-comment"></i> 1</span> 
                </div>
            </div>
        </div>
        <div class="span3 responsive" data-tablet="span6 fix-margin" data-desktop="span3">
            <div class="circle-stat block">
                <div class="visual">
                    <input class="knobify" data-width="115" data-fgcolor="#e23e29" data-thickness=".2" data-skin="tron" data-displayprevious="true" value="+6" data-max="20" data-min="0" />
                </div>
                <div class="details">
                    <div class="title">Containers <i class="icon-caret-up"></i></div>
                    <div class="number">16</div>
                    <span class="label label-info"><i class="icon-bookmark-empty"></i>23</span>
                    <span class="label label-warning"><i class="icon-comment"></i> 0</span> 
                </div>
            </div>
        </div>
        <div class="span3 responsive" data-tablet="span6" data-desktop="span3">
            <div class="circle-stat block">
                <div class="visual">
                    <input class="knobify" data-width="115" data-fgcolor="#fdbb39" data-thickness=".2" data-skin="tron" data-displayprevious="true" value="+4" data-max="10" data-min="0" />
                </div>
                <div class="details">
                    <div class="title">Images<i class="icon-caret-up"></i></div>
                    <div class="number">10</div>
                    <span class="label label-success"><i class="icon-comment"></i>8</span>
                    <span class="label label-warning"><i class="icon-comment"></i> 4</span> 
                </div>
            </div>
        </div>
    </div>
    <!-- END OVERVIEW STATISTIC BLOCKS-->

    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="widget">
        <div class="widget-title">
            <h4><i class="icon-reorder"></i> Tasks</h4>                  
        </div>
        <div class="widget-body">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th width="15%" class="hidden-phone">Name</th>
                        <th width="15%" class="hidden-phone">Application</th>
                        <th width="15%" class="hidden-phone">Node</th>
                        <th width="15%" class="hidden-phone">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for task in tasks %}
                    <tr class="odd gradeX">
                        <td>
                            <a href="{% url 'task_detail' task.name %}">{{ task.name }}</a>
                        </td>
                        <td>{{ task.application.name }}</td>
                        <td>{{ task.node.name }}</td>
                        <td>
                            <a href="{% url 'task_delete' task.name %}">
                                <button class="btn-mini btn-danger delete_button"><i class="icon-remove"></i> Delete Task</button>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- END EXAMPLE TABLE PORTLET-->

<!-- BEGIN BUTTONS WITH ICONS PORTLET-->
<div class="create_button">
    <p>
        <a href="{% url 'task_new' %}"><button class="btn btn-primary"><i class="icon-plus icon-white"></i> Start Task</button></a>
    </p>
</div>
<!-- END BUTTONS WITH ICONS PORTLET-->
</div>
{% endblock %}


{% block extra-js %}
<script src="{% static 'docker_engine/assets/jquery-knob/js/jquery.knob.js' %}"></script>
<script src="{% static 'docker_engine/js/task/index.js' %}"></script>
{% endblock %}